<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue+animate.css</title>
    <script src="vue.js"></script>
    <link rel="stylesheet" href="animate.css" />
    <style>
        .div1 {
            font-size: 40px;
            text-align: center;
        }

        .fade-enter-active,
        .fade-leave-active {
            transition: all 3s ease;
        }

        /*离开*/
        .fade-leave-active {
            opacity: 0;
            width: 10px;
            height: 10px;
        }

        /*开始*/
        .fade-enter {
            opacity: 0;
            width: 10px;
            height: 10px;
        }

        ul,
        li {
            padding: 0;
            margin: 0;
        }
    </style>
    <script>
        window.onload = function () {
            new Vue({
                el: '#my',
                data: {
                    flag: false
                },
                methods: {
                    beforeEnter(el) {
                        // alert('动画进入之前');
                        el.style.background = 'red';
                    },
                    enter() {
                        // alert('动画进入');
                    },
                    afterEnter(el) {
                        // alert("进入动画之后")
                        el.style.background = 'blue';
                    },
                    beforeLeave(el) {
                        el.innerHTML = "123";
                        // alert("动画离开之前")
                    },
                    leave() {
                        // alert("动画离开")
                    },
                    afterLeave() {
                        // alert("动画离开之后")
                    }
                }
            })
        }
    </script>

</head>
<body>
    <div id="my">
        <button @click="flag=!flag">click</button>
        <!--利用animate.css-->
        <transition enter-active-class="animated jello" leave-active-class="animated zoomOutLeft">
            <div class="div1" v-show="flag">welcome</div>
        </transition>
        <!--利用钩子函数自定义-->
        <transition name="fade" 
            @before-enter="beforeEnter" 
            @enter="enter" 
            @after-enter="afterEnter" 
            @before-leave="beforeLeave"
            @leave="leave" 
            @after-leave="afterLeave">
            
            <div class="div1" v-show="flag">welcome</div>
        </transition>
    </div>
</body>

</html>